<template>
  <div id="productdetailslist" v-cloak> 
   
    <div class="demo" :style="{  height: dtheight + 'px' }">
  
          <el-form ref="form"  label-width="0px">           

              <!-- 富文本选取图片 -->
                <el-form-item label="" style="">
                    <div style="">
                        <quill-editor class="editor"
                            v-model="formlist.content" 
                            ref="myQuillEditor" 
                            :options="editorOption" 
                            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)" :style="{  height: dtheight-160 + 'px' }">
                        </quill-editor>
                    </div>
                </el-form-item>
            <!-- 富文本选取图片 -->
            <el-form-item label="" v-show="false" >  
                <el-upload                                                
                    action="uploadUrl"  
                    :show-file-list="false"   
                    :before-upload="beforeupload"
                    :http-request="ImgUploadSectionFile">
                        <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                </el-upload>
            </el-form-item>
            

          </el-form>

          <div class="box_but">
             <div class="but_next" @click="up_but()">上一步</div>
             <div class="but_next"  style="margin-left:10px;" @click="go_but()">发布</div>
          </div>

      

    </div>

   </div>
</template>

<script>
import toolbarOptions from '@/assets/js/quillConfig.js'
export default {
   name: 'productdetailslist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        pid:'',
        form:{
           listdata:[],
        },
        formlist:{
            content:'',
            upfile:'',
        },
        editorOption: {//富文本
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // alert('自定义图片')
                    document.getElementById("selectImg").click();    //调用选择图片
                    
                  } else {
                   // this.quill.format('image', false);
                  }
                }
              }
            }
           }       
        },
       

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 220
     this.pid = this.$route.query.pid
     this.formlist.content = this.$store.state.productdetails_data.content

   
  },
  mounted (){
    
  },
  methods: {
   
   list_fun(){
       
          
   },
   up_but(){
      
      this.$store.commit('productdetails_fun',{"content":this.formlist.content}) 
        //console.log(this.formlist.content)
        this.$router.go(-1)
   },
   go_but(){
          console.log(this.$store.state.product_data,"获取基础产品数据")
         console.log(this.$store.state.standards_data,"获取规格数据")
         console.log(this.$store.state.standards_details_data,"获取规格详情数据1")
          console.log(this.formlist.content,"获取产品详情")

        this.post("/product/update", {
             pid:this.pid,
             cid:this.$store.state.product_data.select_num1, //分类id
             pname:this.$store.state.product_data.pname, //产品名称
             price:this.$store.state.product_data.price, //产品价格
             thumbnail:this.$store.state.product_data.upfile,   //产品缩略图
             cover:this.$store.state.product_data.phonearr,   //产品轮播图
             describe:this.$store.state.product_data.describe,   //产品描述
             content:this.formlist.content,   //产品描述
             sale_count:this.formlist.sale_count,   //月销量
             is_push:this.$store.state.product_data.select_num2,   //推荐
             spec:this.$store.state.standards_data.speclist,   //规格数据
             norms:this.$store.state.standards_details_data,  //规格详情数据
        }).then(res => {

            if(res.error_code == 0){
                this.open1(res.result,'success')  
                this.$router.push({
                     path: '/index/shop',
                     query: {
                        // name:this.user_name,
                        // id:row.uid
                     }
                })
            }else {
            this.open1(res.message,'warning')
        }

        })
         
        

     },
     onEditorBlur(){ //富文本
     },
     onEditorFocus(){//富文本获得焦点事件
     },
     onEditorChange(){//富文本内容改变事件
      //console.log(this.xg_school.content)
     },
      beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
            this.formlist.upfile = res.result.url   
            this.formlist.content = this.formlist.content +'<img src="'+  this.urlimg + this.formlist.upfile +'"/>'

           })

          return false;
      },
      ImgUploadSectionFile(param){//图片上传    
     },
      beforeremove(){
          return false
      },


  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    position: relative;
}
.demo1{
    overflow-y:auto;
}
.box_but{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:10px;
}
.but_next{
   height: 35px;
   width:80px;
   border:1px solid #E5E5E5;
   display: flex;
   align-items: center;
   justify-content: center;
   color:black;
   font-size:14px;
}

.table_box{
   border: 1px solid#E5E5E5;
   margin-top:20px;
}
.table_box:first-child{
   margin-top:0px;
}
.table_box_title{
   background: #E5E5E5;
   color:black;
   height: 45px;
   line-height: 45px;
   padding-left: 20px;
   font-size:16px;
   cursor:pointer;
}
.table_con{
   display: flex;
}
.table_con_item{
   flex: 1;
   height: 50px;
   display: flex;
   align-items: center;
   padding:0px 10px;
   box-sizing: border-box;
   font-size:14px;
}
.table_box>.table_con{
   border-bottom: 1px solid #E5E5E5;
}
.table_box>.table_con:last-child{
   border-bottom:none;
}
.table_con>.table_con_item{
   border-right: 1px solid #E5E5E5;
}
.table_con>.table_con_item:last-child{
   border-right: none;
}
.tag_add_but{
   margin-left:10px;
   color:black;
   cursor:pointer;
}
</style>